<template>
    <div class="box">
        <div class="fixedbox">
            <div class="head_top">
                <div class="top_list" :class='id==m.id?"seclted":""' v-for='(m,idx) in ArrList' @click='changeTitle(m.id)'>{{m.name}}</div>
            </div>
        </div>
        <div style="overflow:scroll;" class='list_box'>
            <mt-loadmore bottomPullText='加载更多'  :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmore" > 
                <div class="goodlist" v-for='(item,idx) in list' @click='ToastTitle'>
                	<div class="detail_title">
                		<div class="order_detail_num">商品单号：{{item.OrderCode}}</div>
                		<div class="status">{{item.ResultTypeName}}</div>
                	</div>
                	<div class="img_box">
	        			<img class="detail_img" :src="item.Cover" >
	        			<div class="detail_content">
	        				<div class="title"><span>{{item.Name}}</span></div>
	        				<div class="total_money">￥{{item.Price}}</div>
	        				<div class="total_money total_num">共登记{{item.Qty}}件</div>
	        			</div>
	        			<div class="btn_box"></div>
	        		</div>
	        		<div class="buttom"></div>
                </div>
            </mt-loadmore>
        </div>
    </div>
</template>

<script>
	const imgutil = require('../../common/until.js')
    import { Loadmore,Indicator, Toast, MessageBox } from 'mint-ui'
    export default {
        name: 'sealed',
        data () {
            return {
               id: 0,
               list: [],
               allLoaded: false,
               pageIndex: 1,
               pageSize: 20,
               ArrList: [{name:'全部',id:0},{name:'待处理',id:1},{name:'已处理',id:2}]
            }
        },
        created: function () {
            this.init(1)
        },
        methods: {
            init: function(t){
            	const that = this
                Indicator.open()
            	that.$http('/pinhuobuyer/GetCSOrderList',{statuID:that.id,pageIndex:that.pageIndex,pageSize:that.pageSize,keyword:''},function(res){
                    Indicator.close()
                    if(res.Result){
                        if(res.Data.OrderList.length == that.pageSize){
                            that.pageIndex++
                            that.allLoaded = false
                        }else{
                            that.allLoaded = true
                        }
                        res.Data.OrderList.map(item => {
                        	item.Cover = imgutil.getUrl(item.Cover,200)
                        })
                      
                        that.list = that.list.concat(res.Data.OrderList)
                        if(t == 2){
                            that.$refs.loadmore.onBottomLoaded()
                        }
                    }
                },'GET')
            },
            changeTitle: function(id){
                if(this.id == id){
                    return
                }
            	this.id = id
                this.allLoaded = false
                this.pageIndex = 1
                this.list = []
                this.init(1)
            },
            loadBottom: function(){
                this.init(2)
            },
            ToastTitle: function(){
            	MessageBox({
                    title:'提示',
                    message: '查看详情暂时没有做',
                    showCancelButton: false,
                })
            }
        },
        components:{
            Loadmore
        }
    }
</script>


<style scoped>
    .box{height: 100vh;background-color: #f5f5f5;}
    .fixedbox{width: 100%;height: 42px;position: relative;}
    .head_top{position: fixed;width: 100%;max-width: 720px;background-color: #fff;height: 42px;line-height: 42px;top: 0;display: flex;flex-direction:row;justify-content:space-around;z-index: 1;border-bottom: 1px solid #ccc;}
    .top_list{text-align:center;height: 40px;line-height: 40px;text-align: center;font-size: 12px;position: relative;border-bottom:2px solid #fff;color: #000;}
    .seclted{border-bottom:2px solid #d52831;color:#d52831;}
    .goodlist{overflow: hidden;}
    .detail_title{background-color: #fff;padding: 10px 3%;width: 94%;overflow: hidden;font-size: 14px;color: #000;border-bottom: 1px solid #5eaffc;}
    .order_detail_num{height: 26px;line-height: 26px;float: left;}
    .status{float: right;height: 26px;line-height: 26px;color: red;}
    .img_box{width: 92%;padding: 10px 4%;overflow: hidden;background-color: #fff;}
    .detail_img{width: 20%;height: 90px;float: left;}
    .detail_content{float: right;width: 76%;overflow: hidden;height: 90px;}
    .title{width: 100%;height: 64px;vertical-align: middle;display: table-cell;}
    .title span{display: inline-block;vertical-align: middle;font-size: 14px;}
    .total_money{display: inline-block;height: 26px;line-height: 26px;text-align: left;color: #b9b9b9;font-size: 14px;width: 49%;}
    .total_num{text-align: right;}
    .status_content{float: left;color: #fff;padding: 3px 3%;background-color: #20cb86;font-size: 14px;border-radius: 10px;}
    .size_list{margin-top:10px;width:100%;background-color:#efeff4;font-size:14px;color:#555;float:left;}
    .btn_box{width: 100%;float: left;margin-top: 15px;text-align: right;background-color: #fff;border-top:1px solid #ccc;}
    .buttom{width: 100%;height: 10px;background-color: #f5f5f5;}
</style>
